<template>
  <view class="container">
    <view class="prod-list">
      <block
        v-for="(item, index) in prodList"
        :key="index"
      >
        <production :item="item" />
      </block>
      <view
        v-if="!prodList.length"
        class="empty"
      >
        暂无数据
      </view>
    </view>
  </view>
</template>

<script setup>
const title = ref('')
const current = ref(1)
const size = ref(10)
const pages = ref(0)
const categoryId = ref(0)
const prodList = ref([])
/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  // 初始化数据
  current.value = 1
  pages.value = 0
  categoryId.value = options.categoryId ? options.categoryId : 0
  title.value = options.title ? options.title : ''
  uni.setNavigationBarTitle({title:title.value})
  loadProdData()
})

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom(() => {
  if (current.value < pages.value) {
    current.value = current.value + 1
    loadProdData()
  }
})

/**
 * 加载商品数据
 */
const loadProdData = () => {
  uni.showLoading()
  http.request({
    url:'/goods/list',
    method: 'GET',
    data: {
      categoryId: categoryId.value,
      current: current.value,
      size: size.value
    }
  })
    .then(({ data }) => {
      console.log("返回的商品列表");
      console.log(data);
      let list
      if (data.current === 1) {
        list = data.records
      } else {
        list = prodList.value
        list = list.concat(data.records)
      }
      prodList.value = list
      pages.value = data.pages
      uni.hideLoading()
    })
}


</script>

<style scoped lang="scss">
@use './prod-classify.scss';
</style>
